<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="add"
				></el-button>
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="add1"
				></el-button>
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					:disabled="selection.length == 0"
					@click="batch_del"
				></el-button>
				<el-button
					type="primary"
					plain
					:disabled="selection.length != 1"
					@click="permission"
					>权限设置</el-button
				>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input
						v-model="search.keyword"
						placeholder="角色名称"
						clearable
					></el-input>
					<el-button
						type="primary"
						icon="el-icon-search"
						@click="upsearch"
					></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding"> </el-main>
	</el-container>

	<save-dialog
		v-if="dialog.save"
		ref="saveDialog"
		@success="handleSaveSuccess"
		@closed="dialog.save = false"
	></save-dialog>

	<permission-dialog
		v-if="dialog.permission"
		ref="permissionDialog"
		@closed="dialog.permission = false"
	></permission-dialog>
</template>

<script>
import saveDialog from "./save";
import permissionDialog from "./permission";

export default {
	name: "role",
	components: {
		saveDialog,
		permissionDialog,
	},
	data() {
		return {
			rule: [
				{
					type: "input",
					field: "4hs5sr",
					title: "输入框1",
					info: "",
					_fc_drag_tag: "input",
					hidden: false,
					display: true,
				},
				{
					type: "textarea",
					field: "4hs5",
					title: "输入框",
					info: "",
					_fc_drag_tag: "input",
					hidden: false,
					display: true,
				},
			],
			dialog: {
				save: false,
				permission: false,
			},
			apiObj: this.$API.system.role.list,
			selection: [],
			search: {
				keyword: null,
			},
		};
	},
	methods: {
		add1() {},
		//添加
		add() {
			this.$modalForm(
				this.$HTTP.post("/admin/config/setting/create", {})
			).then((res) => {});
		},
		//编辑
		table_edit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("edit").setData(row);
			});
		},
		//查看
		table_show(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("show").setData(row);
			});
		},
		//权限设置
		permission() {
			this.dialog.permission = true;
			this.$nextTick(() => {
				this.$refs.permissionDialog.open();
			});
		},
		//删除
		async table_del(row) {
			var reqData = { id: row.id };
			var res = await this.$API.demo.post.post(reqData);
			if (res.code == 200) {
				this.$refs.table.refresh();
				this.$message.success("删除成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
		//批量删除
		async batch_del() {
			this.$confirm(
				`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`,
				"提示",
				{
					type: "warning",
				}
			)
				.then(() => {
					const loading = this.$loading();
					this.$refs.table.refresh();
					loading.close();
					this.$message.success("操作成功");
				})
				.catch(() => {});
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {},
		//根据ID获取树结构
		filterTree(id) {
			var target = null;
			function filter(tree) {
				tree.forEach((item) => {
					if (item.id == id) {
						target = item;
					}
					if (item.children) {
						filter(item.children);
					}
				});
			}
			filter(this.$refs.table.tableData);
			return target;
		},
		//本地更新数据
		handleSaveSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh();
			} else if (mode == "edit") {
				this.$refs.table.refresh();
			}
		},
	},
};
</script>

<style></style>
